<template>
	<view class="content">
		<view class="section-1">
			<view class="section-body">
				<view class="charts">
					<view class="legend">
						<view class="item">
							<view class="icon"></view>
							<text>已完成</text>
						</view>
						<view class="item item__ing">
							<view class="icon"></view>
							<text>在建</text>
						</view>
						<view class="percent">
							<div class="number" v-for="item in list" :key="item.name">
								<text>{{item.done}}</text>
								<text>/</text>
								<text>{{item.ing}}</text>
							</div>
						</view>
					</view>
					<view class="series">
						<view class="item" v-for="item in list" :key="item.name">
							<view class="label">{{item.name}}：{{(Math.round(item.done / item.total) * 100 )|| 0}}%
							</view>
							<view class="bar">
								<view class="done" :style="{width: `${Math.round(item.done / item.total * 100)}%`}">
								</view>
								<view class="ing" :style="{width: `${Math.round(item.ing / item.total * 100)}%`}">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-2">
			<view class="form">
				<view class="form-label">
					<view class="label">塔号：</view>
				</view>
				<view class="form-item">
					<view class="input" @click="handleShowUser()">
						<u--input placeholderClass="input-placeholder" class="input-body" placeholder=""
							v-model="form.xl_mark"></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="section-3">
			<view class="item">
				<view class="title">状态</view>
				<view class="name">
					<view class="label">完成状态：</view>
					<view class="radio-group">
						<view :class="`check-wrap ${radio === idx ? 'check__active' : ''}`"
							v-for="(item, idx) in radioList" @click="radio = idx">
							<view class="check">
								<view class="check-on"></view>
							</view>
							<view class="text">{{item.label}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-5" v-if="radio === 1">
			<view class="wrapper">
				<view class="title">未完成原因<view style="color: #0535d6;" class="iconfont icon-jiahao"></view></view>
				<view class="value l-value">
					<view class="textarea">
						<u--textarea
							:maxlength="-1"
							placeholderClass="textarea-placeholder"
							class="textarea-body"
						    placeholder="输入原因..."
						    v-model="form.content"
							border='null'
						  ></u--textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="section-4">
			<view class="item">
				<view class="title">基础开挖</view>
				<view class="name">
					<view class="part normal-part">
						<view class="label">基础开挖百分比：</view>
						<view class="form-item">
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder=""
									v-model="form.jc_kw"></u--input>
								<view class="iconfont">%</view>
							</view>
						</view>
					</view>
					<view class="part time-part">
						<div class="form-item">
							<view class="input">
								<view class="input-body" @click="showDate('jc_kw_start')">{{form.jc_kw_start}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</div>
						<view class="shape">-</view>
						<div class="form-item">
							<view class="input">
								<view class="input-body" @click="showDate('jc_kw_end')">{{form.jc_kw_end}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</div>
					</view>

				</view>
			</view>
		</view>
		<view class="section-4">
			<view class="item">
				<view class="title">立塔</view>
				<view class="name">
					<view class="part normal-part">
						<view class="label">立塔百分比：</view>
						<view class="form-item">
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder=""
									v-model="form.jc_jz"></u--input>
								<view class="iconfont">%</view>
							</view>
						</view>
					</view>
					<view class="part time-part">
						<div class="form-item">
							<view class="input">
								<view class="input-body" @click="showDate('jc_jz_start')">{{form.jc_jz_start}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</div>
						<view class="shape">-</view>
						<div class="form-item">
							<view class="input">
								<view class="input-body" @click="showDate('jc_jz_end')">{{form.jc_jz_end}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</div>
					</view>
				</view>
			</view>
		</view>
		<view class="section-4">
			<view class="item">
				<view class="title">架线</view>
				<view class="name">
					<view class="part normal-part">
						<view class="label">完成百分比：</view>
						<view class="form-item">
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" placeholder=""
									v-model="form.line"></u--input>
								<view class="iconfont">%</view>
							</view>
						</view>
					</view>
					<view class="part time-part">
						<div class="form-item">
							<view class="input">
								<view class="input-body" @click="showDate('line_start')">{{form.line_start}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</div>
						<view class="shape">-</view>
						<div class="form-item">
							<view class="input">
								<view class="input-body" @click="sshowDate('line_end')">{{form.line_end}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</div>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="section-2">
			<view class="form">
				<view class="form-label" style="width: 85rpx;">
					<view class="label">架线：</view>
				</view>
				<view class="form-item" style="width: 492rpx;">
					<view class="input">
						<u--input
							placeholderClass="input-placeholder"
							class="input-body"
						    placeholder=""
						    v-model="name"
						  ></u--input>
					</view>
				</view>
			</view>
		</view> -->
		<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '250rpx'}">
			<view class="form upload-wrap">
				<view class="form-label" style="width: 140rpx;">
					<view class="label">现场照片：</view>
				</view>
				<view class="form-item"
					:style="{border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', width: '440rpx',}">
					<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
						multiple :maxCount="1"
						:style="{position:'relative',height: fileList.length == 0 ? '44rpx' : 'unset', borderRadius: '20rpx'}">
						<view class="iconfont icon-tupian"></view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="custom-button" @click="submit">提交进度上报</view>
		<u-popup mode="center" :show="showUser" @close="closeUserPop" :round="50">
			<view class="pop user-pop">
				<view class="title">
					<text>请选塔号</text>
				</view>
				<view class="body">
					<view class="wrapper _scroll">
						<view class="item" v-for="(item, idx) in userList" :key="idx" @click="handleSelectUser(idx)">
							<view :class="`check ${selectedUser.indexOf(idx) !== -1 ? 'check__active' : ''}`">
								<view class="check-on"></view>
							</view>
							<view class="name">{{item.xl_mark}}</view>
						</view>
					</view>
				</view>
				<view class="custom-button" @click="confirmSelectUser()">
					确认（{{selectedUser.length}}）
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showStart" v-model="startStamp" closeOnClickOverlay mode="date"
			@confirm="confirmStart" @cancel="showStart = false" @close="showStart = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import { uploadUrl } from '@/baseUrl.js';
	import {
		reportAddApi,
		reportAnalysisApi,
		projectTowerApi
	} from '@/api/report.js'
	export default {
		data() {
			return {
				fileList: [],
				list: [{
						id: 1,
						name: '基础',
						ing: 0,
						done: 0,
						total: 0
					},
					{
						id: 2,
						name: '立塔',
						ing: 0,
						done: 0,
						total: 0
					},
					{
						id: 3,
						name: '架线',
						ing: 0,
						done: 0,
						total: 0
					},
				],
				name: '',
				radioList: [{
						label: '完成'
					},
					{
						label: '未完成'
					},
				],
				radio: 0,
				startStamp: 0,
				showStart: false,
				timeType: '',
				userList: [],
				showUser: false,
				selectedUser: [],
				form: {
					project_id: '',
					xl_mark: '',
					zc_status: '',
					jc_kw: '',
					jc_kw_start: '',
					jc_kw_end: '',
					jc_jz: '',
					jc_jz_star: '',
					jc_jz_end: '',
					line: '',
					line_start: '',
					line_end: '',
					photo_id: '',
					content: ''
				}
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		methods: {
			showDate(type) {
				this.timeType = type;
				this.showStart = true;
			},
			closeDate(type) {
				this.timeType = '';
				this.showStart = false;
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate();
				const h = date.getHours() + ':';
				const m = date.getMinutes() + ':';
				const s = date.getSeconds();
				return Y + M + D;
			},
			confirmStart(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeDate();
			},
			async submit() {
				this.form.photo_id = this[`fileList`].length > 0 ? this[`fileList`][0].url : ''
				console.log(this.form);
				return;
				uni.showLoading({ title: '加载中...' });
				const {
					data
				} = await reportAddApi({
					...this.form
				});
				uni.hideLoading();
				if (data.code === 1) {
					this.userList = data.data;
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
			async fetchAnalysis() {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data
				} = await reportAnalysisApi({
					project_id: this.curProject.id
				});
				uni.hideLoading();
				if (data.code === 1 || data.code === 200) {
					let nameMap = {
						"base_info": '基础',
						"tower_info": '立塔',
						"string_info": '架线',
					}
					let arr = [];
					for (let key in data.data) {
						let item = {};
						item.name = nameMap[key]
						item.ing = data.data[key].build;
						item.done = data.data[key].finish;
						item.total = data.data[key].build + data.data[key].finish;
						arr.push(item);
					}
					this.list = arr;
				}
			},
			async fetchTower() {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data
				} = await projectTowerApi({
					project_id: this.curProject.id
				});
				uni.hideLoading();
				if (data.code === 1) {
					this.userList = data.data;
					if (this.userList.length > 0) {
						this.showUser = true;
					}
				}
			},
			handleShowUser() {
				this.fetchTower();
			},
			confirmSelectUser() {
				let str = this.userList
					.filter((item, idx) => this.selectedUser.indexOf(idx) !== -1)
					.map(item => item.xl_mark)
					.join(',');
				this.form.xl_mark = str;
				this.closeUserPop();
			},
			closeUserPop() {
				this.showUser = false;
			},
			handleSelectUser(idx) {
				this.selectedUser = [idx];
			},
		},
		onReady() {
			this.startStamp = (new Date()).valueOf();
			this.endStamp = (new Date()).valueOf();
			this.fetchAnalysis();
		}
	}
</script>

<style lang="scss" scoped>
	.custom-button {
		margin-top: 60rpx;
		margin-bottom: 85rpx;
	}
	.section-5{
		margin-bottom: 24rpx;
			.wrapper{
				
				width: 670rpx;
				margin-left: 40rpx;
				border-radius: 35rpx;
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				box-sizing: border-box;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				padding: 28rpx 35rpx;
				padding-top: 0;
				.label{
					width: 135rpx;
					float: left;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					height: 48rpx;
					line-height: 48rpx;
					letter-spacing: 0px;
					color: #46464a;
				}
				.title {
					width: 533rpx;
					height: 50rpx;
					padding-top: 15rpx;
					line-height: 50rpx;
					border-bottom: solid 3rpx #f2f2f0;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #8497ac;
				
				}
				
				.value{
					float: left;
					width: 445rpx;
					.audio{
						width: 50rpx;
						height: 50rpx;
						background-color: #ffffff;
						border-radius: 50%;
						box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
						overflow: hidden;
						.audio-center{
							margin-top: 13rpx;
							margin-left: 13rpx;
							border-radius: 50%;
							width: 24rpx;
							height: 24rpx;
							background-color: #ed451b;
						}
					}
					.upload-wrap{
						width: 100%;
						min-height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #0535d6;
						position: relative;
						.iconfont{
							position: absolute;
							right: 25rpx;
							line-height: 44rpx;
							color: #1534ce;
							font-size: 28rpx;
						}
					}
					.date{
						width: 100%;
						height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #0535d6;
						line-height: 48rpx;
						position: relative;
						font-size: 26rpx;
						color: rgba(0,0,0,0.7);
						box-sizing: border-box;
						padding-left: 20rpx;
						text-align: center;
						color: #0535d6;
						.iconfont{
							position: absolute;
							right: 25rpx;
							top: 2rpx;
							font-size: 30rpx;
							color: #dad9df;
						}
					}
					.picker{
						width: 100%;
						height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #0535d6;
						line-height: 48rpx;
						text{
							font-size: 26rpx;
							letter-spacing: 0rpx;
							color: rgba(#46464a, 0.5);
							margin-left: 28rpx;
						}
						.iconfont{
							float: right;
							font-size: 32rpx;
						}
					}
					.input{
						padding-top: 18rpx;
						.input-body{
							box-sizing: border-box;
							width: 100%;
							height: 44rpx;
							padding: 0!important;
							border: none;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0,0,0,0.7);
						}
						.input-placeholder{
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0,0,0,0.5);
						}
					}
					.textarea{
						width: 100%;
						height: 300rpx;
						line-height: 30rpx;
						.textarea-body{
							box-sizing: border-box;
							width: 100%;
							height: 300rpx;
							border: none;
							padding: 18rpx 0rpx!important;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							/deep/ .u-textarea__field{
								height: auto!important;
								font-size: 25rpx;
							}
						}
						/deep/ .u-textarea--disabled{
							background-color: #fff;
						}
													
						.textarea-placeholder{
							font-size: 25rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 50rpx;
							letter-spacing: 3rpx;
							color: rgba(0,0,0,0.5);
						}
					}
				}
				.l-value{
					width: 100%;
				}
			
			}
	}
	.user-pop {
		.body {
			padding: 40rpx 50rpx;

			.wrapper {
				width: 100%;
				height: 540rpx;
				overflow-y: auto;
				overflow-x: hidden;
			}

			.item {
				width: auto;
				height: 40rpx;
				margin-bottom: 20rpx;
				@include clear();

				.check {
					width: 24rpx;
					height: 24rpx;
					border: solid 1rpx #000000;
					border-radius: 50%;
					float: left;
					margin-top: 8rpx;
					position: relative;

					.check-on {
						transition: 0.3s ease;
						opacity: 0;
						transform: scale(0.5);
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 18rpx;
						height: 18rpx;
						background-color: #000000;
					}
				}

				.name {
					width: calc(100% - 45rpx);
					float: left;
					font-size: 26rpx;
					font-weight: 300;
					height: 40rpx;
					font-stretch: normal;
					line-height: 40rpx;
					letter-spacing: 0rpx;
					color: #000000;
					margin-left: 20rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap
				}

				.check__active {
					.check-on {
						opacity: 1;
						transform: scale(1);
					}
				}
			}
		}
	}

	.section-4 {
		.item {
			margin-bottom: 30rpx;
			width: 670rpx;
			margin-left: 40rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			margin-top: 28rpx;

			.title {
				width: 533rpx;
				height: 50rpx;
				padding-top: 15rpx;
				line-height: 50rpx;
				border-bottom: solid 3rpx #f2f2f0;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #8497ac;
				margin-left: 35rpx;
			}

			.part {
				width: 100%;
				@include clear();

				.input {
					position: relative;
				}

				.iconfont {
					position: absolute;
					right: 25rpx;
					top: 0rpx;
					font-size: 30rpx;
					color: #dad9df;
				}
			}

			.name {
				width: 100%;
				box-sizing: border-box;
				padding: 0 35rpx;
				@include clear();
				margin-top: 15rpx;
				line-height: 50rpx;

				.label {
					float: left;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #46464a;
				}
			}

			.form-item {
				display: inline-block;
				float: left;
				width: 146rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 17rpx;
				@include clear();

				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: 100%;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.time-part {
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				display: flex;
				margin-bottom: 24rpx;
				justify-content: space-between;

				.form-item {
					width: 40%;
					border: none;
				}

				.shape {
					height: 48rpx;
					line-height: 48rpx;
					color: #1534ce;
				}
			}
		}
	}

	.section-3 {
		.item {
			margin-bottom: 30rpx;
			width: 670rpx;
			height: 158rpx;
			margin-left: 40rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			margin-top: 28rpx;

			.title {
				width: 533rpx;
				height: 50rpx;
				padding-top: 15rpx;
				line-height: 50rpx;
				border-bottom: solid 3rpx #f2f2f0;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #8497ac;
				margin-left: 35rpx;
			}

			.name {
				width: 100%;
				height: 50rpx;
				box-sizing: border-box;
				padding: 0 35rpx;
				@include clear();
				margin-top: 15rpx;
				line-height: 50rpx;

				.label {
					float: left;
					width: 165rpx;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #46464a;
				}

				.radio-group {
					float: left;
					width: calc(100% - 165rpx);
					@include clear();

					.check-wrap {
						float: left;

						.text {
							font-size: 26rpx;
							font-weight: 300;
							font-stretch: normal;
							line-height: 50rpx;
							letter-spacing: 0rpx;
							color: #46464a;
							float: left;
							margin-left: 15rpx;
							margin-right: 35rpx;
						}

						.check {
							width: 24rpx;
							height: 24rpx;
							border: solid 1rpx #0535d6;
							border-radius: 50%;
							float: left;
							margin-top: 13rpx;
							position: relative;

							.check-on {
								transition: 0.3s ease;
								opacity: 0;
								transform: scale(0.5);
								border-radius: 50%;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								margin: auto;
								width: 18rpx;
								height: 18rpx;
								background-color: #0535d6;
							}
						}
					}

					.check__active {
						.check {
							.check-on {
								opacity: 1;
								transform: scale(1);
							}
						}
					}
				}
			}
		}
	}

	.section-2 {
		.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
		}

		/deep/ .u-upload__wrap {

			background-color: transparent;
		}

		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}

		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		width: 670rpx;
		margin-left: 40rpx;
		height: 104rpx;
		background-color: #ffffff;
		border-radius: 35px;
		margin-bottom: 30rpx;

		.form {
			width: 100%;
			text-align: center;
			padding-top: 28rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
			@include clear();

			.form-label {
				display: inline-block;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #46464a;
				float: left;
			}

			.form-item {
				display: inline-block;
				float: left;
				width: 464rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 34rpx;
				@include clear();

				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: 100%;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}

	.section-1 {
		width: 100%;
		background-color: #2e5efe;
		margin-bottom: 50rpx;

		.section-body {
			width: 100%;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			background-color: #fff;
			padding: 0 40rpx;

			.charts {
				width: 100%;
				padding-top: 30rpx;

				.legend {
					width: 165rpx;
					height: 40rpx;
					float: right;
					text-align: right;

					.item {
						height: 40rpx;
						display: inline-block;

						.icon {
							display: inline-block;
							border-radius: 50%;
							width: 15rpx;
							height: 15rpx;
							background-color: #2d5dfe;
							margin-right: 7rpx;
						}

						text {
							font-size: 16rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 35rpx;
							letter-spacing: 0rpx;
							color: #d8d8d5;
							margin-right: 20rpx;
						}

					}

					.item__ing {
						.icon {
							background-color: #00cdb4;
						}

						text {
							margin-right: 0;
						}
					}

					.percent {
						width: 100%;
						box-sizing: border-box;
						padding-left: 30rpx;

						.number {
							width: 100%;
							font-size: 16rpx;
							height: 20rpx;
							line-height: 20rpx;
							color: #3b3c40;
							display: flex;
							justify-content: space-between;


						}
					}
				}

				.series {
					width: 505rpx;
					float: left;
					padding-top: 40rpx;

					.item {
						width: 100%;
						height: 20rpx;
						line-height: 20rpx;
						@include clear();

						.label {
							float: left;
							width: 130rpx;
							line-height: 20rpx;
							font-size: 16rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #3b3c40;
						}

						.bar {
							float: left;
							width: 360rpx;
							height: 14rpx;
							margin-top: 3rpx;
							background-color: #d8d8d5;
							border-radius: 7rpx;
							position: relative;
							overflow: hidden;

							.done {
								height: 100%;
								float: left;
								background-color: #2d5dfe;
							}

							.ing {
								height: 100%;
								float: left;
								background-color: #00cdb4;
							}
						}
					}
				}
			}
		}
	}

	.section-0 {
		width: 100%;
		background-color: #2e5efe;

		.section-body {
			width: 100%;
			padding-left: 40rpx;
			height: 90rpx;
			padding-right: 40rpx;
			background-color: #1534ce;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;

			.project-name {
				margin-top: 24rpx;
				width: 100%;
				height: 42rpx;
				font-size: 26rpx;
				font-weight: light;
				font-stretch: normal;
				line-height: 42rpx;
				letter-spacing: 0rpx;
				color: #ffffff;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;

				.iconfont {
					font-weight: normal;
					font-size: 26rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.pop {
		width: 671rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		border-radius: 35rpx;
		overflow: hidden;

		.title {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #1534ce;
			font-size: 42rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 4rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.project-pop {
		.body {
			padding: 40rpx 50rpx;

			.wrapper {
				width: 100%;
				height: 540rpx;
				overflow-y: auto;
				overflow-x: hidden;
			}

			.item {
				width: auto;
				height: 40rpx;
				margin-bottom: 20rpx;
				@include clear();

				.check {
					width: 24rpx;
					height: 24rpx;
					border: solid 1rpx #000000;
					border-radius: 50%;
					float: left;
					margin-top: 8rpx;
					position: relative;

					.check-on {
						transition: 0.3s ease;
						opacity: 0;
						transform: scale(0.5);
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 18rpx;
						height: 18rpx;
						background-color: #000000;
					}
				}

				.name {
					float: left;
					font-size: 32rpx;
					font-weight: 300;
					height: 40rpx;
					font-stretch: normal;
					line-height: 40rpx;
					letter-spacing: 0rpx;
					color: #000000;
					margin-left: 20rpx;
				}

				.check__active {
					.check-on {
						opacity: 1;
						transform: scale(1);
					}
				}
			}
		}
	}
</style>
